<template>
    <div class="shop">
      <mt-header title="店铺">
        <a @click="$router.go(-1)" slot="left">
          <mt-button icon="back">返回</mt-button>
        </a>
      </mt-header>
      <div class="info-header">
        <div class="info-opacity"></div>
        <div class="info">
          <div class="info-l">
            <img :src="message.shop_logo" height="132" width="132">
          </div>
          <div class="info-r">
            <strong>{{message.shop_name}}</strong>
          <p>销量:<span>{{message.sales}}</span></p>
          <p>作品:<span>{{message.count}}</span></p>
          <div class='collect' :class='{collect_active : message.collect_merchant}' @click='addMerchantCollect'><i class='iconfont icon-xin1'></i><span>收藏</span></div>
          </div>
        <div class="cb"></div>
      </div>
      <div class="info-nav">
            <ul>
              <li :class='[{active : option == "sales" && sort == "desc" },{active1 : option == "sales" && sort == "asc" }]' @click='optionSort("sales")'>销量 <i class="iconfont icon-up"></i><i class="iconfont icon-down"></i></li>
              <li :class='[{active : option == "price" && sort == "desc" },{active1 : option == "price" && sort == "asc" }]' @click='optionSort("price")'>价格 <i class="iconfont icon-up"></i><i class="iconfont icon-down"></i></li>
              <li :class='[{active : option == "view" && sort == "desc" },{active1 : option == "view" && sort == "asc" }]' @click='optionSort("view")'>人气 <i class="iconfont icon-up"></i><i class="iconfont icon-down"></i></li>
            </ul>
          </div>
      <div class="info-list">
     <ul>
     <router-link :to="{path:'/product_details',query:{ id:item.goods_id }}"  tag="li" v-for="(item,key) in message.list" :key='key' >
       <img :src="item.cover_url" alt="">
       <p v-text="item.title"></p>
       <span></span>
       <strong  v-text="item.price"></strong>
     </router-link>
     <div class="cb"></div>
   </ul>
  </div>
  </div>
  <div class="cb"></div>
      <div class="footer">
      <p>暂无更多</p>
    </div>
  </div>

</template>

<script type='text/ecmascript-6'>
    export default {
        name: "Stylist_shop",
        data () {
          return {
          details:[
            {title:'大花小花新品撒大声地是撒大声地是的',src:require('../images/1.png'),router:'/product_details',money:299},
            {title:'大花小花新品撒大声地是撒大声地是的',src:require('../images/1.png'),router:'/product_details',money:299},
            {title:'大花小花新品撒大声地是撒大声地是的',src:require('../images/1.png'),router:'/product_details',money:299},
            {title:'大花小花新品撒大声地是撒大声地是的',src:require('../images/1.png'),router:'/product_details',money:299},
          ],
              shop_id:'',
              message:'',
              option:'sales',//选项
              sort:'desc'//排序
          }
        },
        created (){
            const that = this;
            that.shop_id  = that.$route.query.id;

                const url = that.getUrl('shop');
            const params = {
                shop_id:that.$route.query.id,
                token:that.getToken(),
                option:that.option,
                sort:that.sort
            }
            that.$http.post(url,params,{emulateJSON: true}).then(res =>{

                if(res.data.code === 0){
                    that.message = res.data.data;
                }else {
                    that.$messagebox('提示', res.data.errMsg);
                }

            },err =>{
                that.$messagebox('提示', '找不到服务器，请稍后尝试');
            })

        },
        methods :{
            addMerchantCollect () {
                const that = this;
                const url = that.getUrl('goods/add_merchant_collect');
                const params = {
                    token: that.getToken(),
                    shop_id:that.message.shop_id
                };
                that.$http.post(url, params, {emulateJSON: true}).then(function (res) {
                    if (res.data.code === 0) {
                        that.collect_merchant = !that.collect_merchant;
                        that.$messagebox('提示', res.data.data).then(res =>{
                              that.getShop(that.option,that.sort)  //更新请求
                        });
                    } else {
                        that.$messagebox('提示', '未知错误');
                    }
                }, function (err) {
                    this.$messagebox('提示', '找不到服务器，请稍后再试');
                })
            },
            getShop(option,sort){
//                封装列表请求
                const that = this;
                const url = that.getUrl('shop');
                let params = {
                    shop_id:that.shop_id,
                    token:that.getToken(),
                    option:option,
                    sort:sort
                }
                that.$http.post(url,params,{emulateJSON: true}).then(res =>{

                    if(res.data.code === 0){
                        that.message = res.data.data;
                    }else {
                        that.$messagebox('提示', res.data.errMsg);
                        return false
                    }
                },err =>{
                    that.$messagebox('提示', '找不到服务器，请稍后尝试');
                })

            },
            optionSort(e){
                const that = this;
                switch (e){
                    case 'sales':
                        if(that.sort == 'desc'){
                            that.option = e;
                            that.sort = 'asc'
                            that.getShop(e,that.sort);
                            return false
                        }else {
                            that.option = e;
                            that.sort = 'desc'
                            that.getShop(e,that.sort);
                            return false
                        }
                        break;
                    case 'price':
                        if(that.sort == 'desc'){
                            that.option = e;
                            that.sort = 'asc'
                            that.getShop(e,that.sort);
                            return false
                        }else {
                            that.option = e;
                            that.sort = 'desc'
                            that.getShop(e,that.sort);
                            return false
                        }
                        break;
                    case 'view':
                        if(that.sort == 'desc'){
                            that.option = e;
                            that.sort = 'asc'
                            that.getShop(e,that.sort);
                            return false
                        }else {
                            that.option = e;
                            that.sort = 'desc'
                            that.getShop(e,that.sort);
                            return false
                        }
                        break;
                    default:return false
                }
            }
        }
    }
</script>

<style  lang="less" rel="stylesheet/less">

  @import "../../lib/less/variable";
      .footer{
      .pb(60);

      background: #fff;
      text-align: center;
      .fs(16);
      color: #ccc;
    }
  .shop{
    width: 100%;
    overflow: hidden;
    header{
      background: #fff;
      color:#000;
    }
    .info-header{
      width: 100%;
      .h(140);
      background: url("../images/class-template/1.png")no-repeat center;
      background-size: cover;
      position: relative;
      .info-opacity{
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0.6;
      }
      .info{
        width: 100%;
        position: absolute;
        .left(0);
        top: 50%;
        .mt(-30);
        .ml(30);
        .fs(14);
         color: #fff;
        .info-l{
          width: 20%;
         float: left;
            img{
          .w(60);
          .h(60);
          border: 2px solid #fff;
          display: inline-block;
          }
        }

      .info-r{
        float: left;
        width: 80%;
       position: relative;
         strong{
          .fs(16);
          vertical-align: top;
          }
        p{
          width: 60%;
          span{
            .ml(5);
            vertical-align: top;
          }
        }
        .collect{
           position: absolute;
            right: 20%;
            top: 10%;
            color: #fff;
            span{
                .fs(16);
                vertical-align: text-bottom;
            }
            i{
                .fs(20);
            }
        }
        .collect_active{
            color: #0F7AE0;
        }
      }

      }
      .info-nav{
        width: 100%;
        .h(35);
        .lh(35);
        background: #fff;
        ul{
          display: flex;
          li{
            flex: 1;
            text-align: center;
            .fs(14);
            i{
              display:none;
              .w(5);
              .fs(10);
              position: relative;
              .left(0);
              .top(-3);
            }
            i:last-child{
              .top(5);
              .left(-5);
            }
          }
          li.active{
            color: #0E79D9;
            i{
              display: inline-block;
            }
            i:first-child{
              color: #666;
            }
          }
          li.active1{
            color: #0E79D9;
            i{
              display: inline-block;
            }
            i:last-child{
              color: #666;
            }
          }
        }
      }
      .info-list{
        width: 100%;
        background: #fff;
        ul{
          li{
            width: 50%;
            float: left;
            box-sizing: border-box;
            .padding(5,5);
            text-align: center;
            img{
              width: 100%;
            }
            p{
              /*控制标签文字一行显示*/
              display:block;             /*内联对象需加*/
              word-break:keep-all;       /* 不换行 */
              white-space:nowrap;        /* 不换行 */
              overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow:ellipsis;    /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
              .fs(12);
            }
            span{
              display: inline-block;
              width: 100%;
              .h(1);
              border: 1px solid #ccc;
            }
            strong:before{
              content: "￥";
              color:#0F7ADA;
            }
            strong{
              color: #0F7ADA;
              .fs(16)
            }


          }
          li:nth-child(odd){
            .pl(10)
          }
          li:nth-child(even){
            .pr(10)
          }

        }
      }
    }
  }

</style>
